<link rel="stylesheet" type="text/css" href="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.css" />
<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 9]>
<script language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/excanvas.min.js"  charset="utf-8"></script>
<![endif]-->
<script type="text/javascript"	src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8"></script>
<script language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pieRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js"></script>

<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/chart/jqplot/pointDemo.js" />

<div id="barDemo">
	<div title="API">
	  <div>
		<samp><h2>points点图设置</h2></samp> 
		  <div style='padding-left:30px'>
			 <form id="param" class="init ccay-form">
			  <div class="ccay-form-body ccay-form-custom">	
			  	<li class="ccay-form-row">
					<samp><h3>初始化属性</h3></samp> 
			    	<span class="ccay-form-input">
			    		<h3>描述</h3> 
			    	</span>
				</li>
				<li class="ccay-form-row">
					<samp>show: boolean</samp> 
			    	<span class="ccay-form-input">是否在图中显示数据点</span>
				</li>
				<li class="ccay-form-row">
					<samp>style: string</samp> 
			    	<span class="ccay-form-input">各个数据点在图中显示的方式，默认是"filledCircle"(实心圆点),其他几种方式'circle'，'diamond', 'square', 'filledCircle'，'filledDiamond' or 'filledSquare'.</span>
				</li>
				<li class="ccay-form-row">
					<samp>lineWidth: number</samp> 
			    	<span class="ccay-form-input">数据点各个的边的宽度（如果设置过大，各个边会重复，会显示的类似于实心点） </span>
				</li>
				<li class="ccay-form-row">
					<samp>size: number</samp> 
			    	<span class="ccay-form-input">数据点的大小 </span>
				</li>
				<li class="ccay-form-row">
					<samp>color: color</samp> 
			    	<span class="ccay-form-input">数据点的颜色</span>
				</li>
				<li class="ccay-form-row">
					<samp>shadow: boolean</samp> 
			    	<span class="ccay-form-input">是否为数据点显示阴影区（增加立体效果） </span>
				</li>
				<li class="ccay-form-row">
					<samp>shadowAngle: number</samp> 
			    	<span class="ccay-form-input">阴影区角度，x轴顺时针方向 </span>
				</li>
				<li class="ccay-form-row">
					<samp>shadowOffset： number</samp> 
			    	<span class="ccay-form-input">参考grid中相同参数</span>
				</li>
				<li class="ccay-form-row">
					<samp>shadowDepth: number</samp> 
			    	<span class="ccay-form-input">参考grid中相同参数</span>
				</li>
				<li class="ccay-form-row">
					<samp>shadowAlpha: number</samp> 
			    	<span class="ccay-form-input">参考grid中相同参数</span>
				</li>
				</div>
			  </form>
			</div>
		</div>
		<!--  -->
		<br>
		<a onclick="Ccay.Common.toggle(this,'#serviceCodeArea')">需要引入的JS>></a>
			<div id="serviceCodeArea" class="codeArea" style="display:none;">
<pre>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/jquery.jqplot.min.js" 	charset="utf-8">&lt/script>
&ltscript language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.pieRenderer.min.js">&lt/script>
&ltscript language="javascript" type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.donutRenderer.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.cursor.min.js">&lt/script>
&ltscript type="text/javascript" src="ccay/web/resource/ui/plugins/plot/plugins/jqplot.highlighter.min.js">&lt/script>

&ltscript type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.jqplot.js" charset="utf-8">&lt/script>
</pre>
</div>
	</div>
	
	<div title="点图" tabid='pointChart'>
		<h4><span>点图</span></h4>
		<div id=pointChart style="width:500px"></div>
		<span class="ccay-button"   onclick="$('#pointChart').chartAsImage()">
			<a class="ccay-icon pic"></a>
			<label>保存为图片</label>
		</span>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>点图&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
				$("#chart11").chart2({
					ajax:{
						url:'ccay/example/ui/chart/datas2.json'
					},
					fnConvert:function(item){
						var result = [];
						var temp1 = [];
						var temp2 = [];
						var temp3 = [];
						for (var idx = 0; idx < item.length; idx++) {
							temp1.push(item[idx]['profit']);
							temp2.push(item[idx]['total']);
							temp3.push(temp2[idx]-temp1[idx]);
						}
						result.push(temp1);
						result.push(temp2);
						result.push(temp3);
						
						return result;
					},
			        
					skin: {
						axesDefaults: {
						      labelRenderer: $.jqplot.CanvasAxisLabelRenderer
					    },
					    seriesDefaults: {
					    	showLine: false,
					        rendererOptions: {
					            smooth: true
					        }
					    },
					    series:[{label:'月度利润',markerOptions: {size:7, style:'circle'}},
					            {label:'月度销售额',markerOptions: {size:7, style:'filledDiamond'}},
					            {label:'月度支出',markerOptions: {size:7, style:'filledSquare'}}
					           ],
					    highlighter : Ccay.UI.Chart.defaultHighlighter,
					    legend: { show:true }
					},
					click: function (ev, seriesIndex, pointIndex, data) {
						Ccay.UI.topBox("The seriesIndex is {0}, pointIndex is {1}, x is {2}, y is {3}. 注册 click 事件并显示明细数据或者Chart可以达到钻取的效果。".formatValue( seriesIndex, pointIndex , data[0], data[1]));
		            }
				});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
	</div>
	
	<div title="点线图" tabid='pointLineChart'>
		<h4><span>点线图</span></h4>
		<div id="pointLineChart" style="width:500px"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>
&lt;h4>&lt;span>点线图&lt;/span>&lt;/h4>
&lt;div id=chart22>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
				var cosPoints = [];
				for (var i=0; i<2*Math.PI; i+=1){ 
				  cosPoints.push([i, Math.cos(i)]); 
				}
				 
				var sinPoints = []; 
				for (var i=0; i<2*Math.PI; i+=0.4){ 
				   sinPoints.push([i, 2*Math.sin(i-.8)]); 
				}
				 
				var powPoints1 = []; 
				for (var i=0; i<2*Math.PI; i+=1) { 
				    powPoints1.push([i, 2.5 + Math.pow(i/4, 2)]); 
				}
				 
				var powPoints2 = []; 
				for (var i=0; i<2*Math.PI; i+=1) { 
				    powPoints2.push([i, -2.5 - Math.pow(i/4, 2)]); 
				} 
				
				$("#chart22").chart2({
					data:[cosPoints,sinPoints,powPoints1,powPoints2],
					skin: {
						seriesDefaults: {
					        rendererOptions: {
					            smooth: true
					        }
					    },
					    highlighter : Ccay.UI.Chart.defaultHighlighter,
					    series:[ 
					        {
					          markerOptions: { style:'dimaond' }
					        }, 
					        {
					          showLine:false, 
					          markerOptions: { size: 7, style:"x" }
					        },
					        { 
					          markerOptions: { style:"circle" }
					        }, 
					        {
					          markerOptions: { style:"filledSquare", size:10 }
					        }
					    ]
					}
				});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js2').html(),$('#html2').html())">试一试</a>
		</div>
	</div>
	
	<div title="点线图(高亮提示)" tabid='pointChart2'>
		<h4><span>点线图</span></h4>
		<div id=pointChart2 style="width:500px"></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html3'>
&lt;h4>&lt;span>点线图(高亮提示)&lt;/span>&lt;/h4>
&lt;div id=chart33>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js3'>
				$("#chart33").chart2({
					ajax:{
						url:'ccay/example/ui/chart/datas2.json'
					},
					skin:{highlighter : Ccay.UI.Chart.defaultHighlighter},
					convertArrayType: 2,
				    convertFields: ['profit','total'],
				});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js3').html(),$('#html3').html())">试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;width:700px" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
	    <div class="ccay-form-body">
	    	<ul></ul>
		</div>     
		<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	           <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	            <samp class="i18n" i18nKey=""></samp>                          
	            <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
		</div>
	  	</form> 
	</div>
</div>